<!--
  - Copyright (c) 2018.
  - 北京九思金信科技有限公司对该文件内容保留所有权利。
  - 未经许可，不得私自拷贝、传播、发布、引用该文件内容，违者将被追究法律责任。
  -->

<template>
  <div style="height: 100%">
    <el-row class="row-bg" type="flex" align="middle">
      <p style="padding: 0;margin: 0"><b>操作日志模块</b> 提供操作日志，以便管理员查看用户在系统中的操作，追溯历史。
      </p>
    </el-row>
    <el-card class="log-card" style="height: calc(100% - 50px)">
      <el-row style="text-align:left">
        <el-button type="primary" icon="el-icon-refresh" style="margin-right: 48px" size="small"
                   class="operationLogButton"
                   @click="load">刷新
        </el-button>
        <el-radio-group id="log-radio-group" size="small" v-model="dateType" @change="load">
          <el-radio-button>全部</el-radio-button>
          <el-radio-button label="today">今天</el-radio-button>
          <el-radio-button label="yesterday">昨天</el-radio-button>
          <el-radio-button label="thisWeek">本周</el-radio-button>
          <el-radio-button label="lastWeek">上周</el-radio-button>
          <el-radio-button label="thisMonth">本月</el-radio-button>
          <el-radio-button label="lastMonth">上月</el-radio-button>
        </el-radio-group>
        <el-input v-model="operationContent" placeholder="请输入操作信息" size="small" class="log-query-input"
                  @keyup.enter.native="load">
        </el-input>
        <el-dropdown trigger="click" @command="onCommand" style="margin-left: 12px;height: 30px"
                     ShowDropDownArrow="false">
          <el-button size="small"
                     type="primary" icon="joys-icon-clear"
                     style="width: 100px;background-color: #B94A48;border-color:#B94A48;">
            <span style="margin: 0px 25px 0px 0px">清除</span>
            <i class="joys-icon-smalltriangle" style="font-size: 5px"/>
          </el-button>
          <el-dropdown-menu class="operationLog-dropdown-menue-delete" style="margin-top: 1px" slot="dropdown">
            <el-dropdown-item class="dropdown-item-delete" command="delete-all">
              <span>清除全部</span>
            </el-dropdown-item>
            <el-dropdown-item class="dropdown-item-delete" command="delete-today">
              <span>清除今天</span>
            </el-dropdown-item>
            <el-dropdown-item class="dropdown-item-delete" command="delete-yesterday">
              <span>清除昨天</span>
            </el-dropdown-item>
            <el-dropdown-item class="dropdown-item-delete" command="delete-thisWeek">
              <span>清除本周</span>
            </el-dropdown-item>
            <el-dropdown-item class="dropdown-item-delete" command="delete-lastWeek">
              <span>清除上周</span>
            </el-dropdown-item>
            <el-dropdown-item class="dropdown-item-delete" command="delete-thisMonth">
              <span>清除本月</span>
            </el-dropdown-item>
            <el-dropdown-item class="dropdown-item-delete" command="delete-lastMonth">
              <span>清除上月</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-row>
      <el-container v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
                    style="height: 100%">
        <el-aside class="operationLogAside" style="width: 115px;height: calc(100% - 30px)">
          <div v-for="(item,ind) in dateList" :key="ind" class="operationLogDiv">
            <el-button class="asideButton" @click="showData(ind,item.operateData)">
              {{dataFunction(item.operateData)}}
              <i class="el-icon-caret-right" v-if="ind==showDataIndex"></i>
              <i class="el-icon-caret-bottom" v-else></i>
            </el-button>
          </div>
        </el-aside>
        <el-main class="operationLogMain" style="height: 100%">
          <el-card style="margin-top: -20px" v-if="dateLogList.length">
            <div class="history">
              <ul class="historyNews">
                <li class="historyNew" v-for="(item,ind) in dateLogList" :key="ind">
                  <i class="joysicon joys-icon-spot"></i>
                  <i class="el-icon-caret-left" style="margin: 20px -31px 0 4px;font-size: 20px;color: #f0f0f0"></i>
                  <dl class="news">
                    <dt class="time">{{timeFunction(item.creationTs)}}</dt>
                    <dd class="opContent">
                      <span>{{item.userName}}&nbsp</span>
                      <span v-if="item.operationAction==='新增'"
                            style="color: #007AFF">{{item.operationAction}} </span>
                      <span v-if="item.operationAction==='修改'"
                            style="color: #0EB44C">{{item.operationAction}} </span>
                      <span v-if="item.operationAction==='删除'"
                            style="color: #B94A48">{{item.operationAction}} </span>
                      <span v-if="item.operationAction!=='新增'
                                &&item.operationAction!=='修改'
                                &&item.operationAction!=='删除'"
                            style="color: #007AFF">{{item.operationAction}} </span>
                      <span>&nbsp{{item.operationContent}}</span>
                    </dd>
                  </dl>
                </li>
              </ul>
            </div>
          </el-card>
        </el-main>
      </el-container>
    </el-card>
  </div>
</template>

<script>
  export default {
    name: "OperationLog",
    mounted() {
      this.load()
    },
    data() {
      return {
        loading: true,
        dateListTemp: [],
        dateList: [],
        dateLogList: [],
        operationContent: null,
        showDataIndex: 0,
        dateType: 'today',
        // dialogVisible:false
      }
    },
    methods: {

      // 查询操作日期集合
      load() {
        this.dateList = []
        this.dateLogList = []
        this.loading = true
        this.$http.get('/joys-rest/joys-admin/log/date/list', {
          params: {
            userId: null,
            operationModule: null,
            operationAction: null,
            operationBill: null,
            operationContent: this.operationContent,
            dateType: this.dateType,
          }
        }).then(resp => {
          this.dateListTemp = resp.data
          this.showDataIndex = 0
          // 默认展示第一条日期的数据
          if (this.dateListTemp && this.dateListTemp.length) {
            this.showData(this.showDataIndex, this.dateListTemp[this.showDataIndex].operateData)
          } else {// 无数据
            this.loading = false
          }
        }).catch(err => {
          this.$message.error(err.response.data.message)
        })
      },
      // 查询选中日期的操作日志
      showData(ind, operateData) {
        this.showDataIndex = ind
        this.dateLogList = []
        this.$http.get('/joys-rest/joys-admin/log/dateLog/list', {
          params: {
            userId: null,
            operationModule: null,
            operationAction: null,
            operationBill: null,
            operationContent: this.operationContent,
            operateData: operateData
          }
        }).then(resp => {
          this.dateLogList = resp.data
          this.dateList = this.dateListTemp
          this.loading = false
        }).catch(err => {
          this.$message.error(err.response.data.message)
        })
      },
      // 清除按钮
      onCommand(cmd) {
        if (cmd === 'delete-all') {
          this.deleteLogData()
        } else if (cmd === 'delete-today') {
          // this.dialogVisible=true
          this.deleteLogData('today')
        } else if (cmd === 'delete-yesterday') {
          this.deleteLogData('yesterday')
        } else if (cmd === 'delete-thisWeek') {
          this.deleteLogData('thisWeek')
        } else if (cmd === 'delete-lastWeek') {
          this.deleteLogData('lastWeek')
        } else if (cmd === 'delete-thisMonth') {
          this.deleteLogData('thisMonth')
        } else if (cmd === 'delete-lastMonth') {
          this.deleteLogData('lastMonth')
        }
      },
      // 清除数据
      deleteLogData(removeType) {
        var dateType = this.dateType
        this.$confirm('清除数据后，不可恢复，确认删除?', '提示', {
          confirmButtonText: '删除',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http.delete('/joys-rest/joys-admin/log/cleanUp', {
            params: {
              removeType: removeType
            }
          }).then(resp => {
            if ((removeType && dateType && removeType == dateType)
              || (!removeType && !dateType)) {
              this.dateList = []
              this.dateLogList = []
            }
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          }).catch(err => {
            this.$message.error(err.response.data.message)
          })

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });

      },
      // 时间戳格式转化
      timeFunction(cellValue,) {
        if (cellValue) {
          // 接收时间
          var date = new Date(cellValue) //时间戳为10位需*1000，时间戳为13位的话不需乘1000
          var Y = date.getFullYear() + '/'
          var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '/'
          var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate());
          var h = ' ' + (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
          var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':'
          var s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
          return h + m + s
        }
      },
      dataFunction(cellValue,) {
        if (cellValue) {
          // 接收时间
          var date = new Date(cellValue) //时间戳为10位需*1000，时间戳为13位的话不需乘1000
          var Y = date.getFullYear() + '/'
          var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '/'
          var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate());

          return Y + M + D
        }
      },

    }
  }
</script>
<style>
  .log-card .el-card__body {
    height: 100%;
  }
</style>
<style lang="less">
  .operation-log__toolbar {
    display: flex;
    justify-content: flex-start;
  }

  .buttonStyle {
    background-color: #001616 !important;
    border-color: #001616 !important;
    opacity: 0.2;
  }

  .operationLogButton {
    width: 56px;
    height: 28px;
    /*line-height: 28px;*/
    text-align: center;
  }

  .operationLogButton.el-button {
    margin-right: 55px;
  }

  .opContent {
    margin: -15px 0 0 0;
    padding: 8px 20px 8px 15px;
    background: #f0f0f0;
    font-size: 13px;
    line-height: 21px;
  }

  .row-bg {
    height: 50px;
    background-color: #E4E8EB;
    font-size: 13px;
    padding-left: 20px;

  }

  .operationLogAside {
    width: 100px;
    /*height: 465px;*/
    overflow-x: hidden;
    margin: 20px 0px 0px 0px;
  }

  .operationLogAside::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
    border-radius: 5px;
    background-color: #ffff;
  }

  .operationLogAside::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, .2);
  }

  .operationLogMain {
    /*height: 475px;*/
    margin: 20px 0px 0px -5px;
  }

  .operationLogMain::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
    border-radius: 5px;
    background-color: #ffff;
  }

  .operationLogMain::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, .2);
  }

  .operationLogDiv {
    margin: 0px 0px 10px 0px
  }

  .asideButton.el-button {
    background: #F7F7F7;
    border: none;
  }

  .operationLog-dropdown-menue-delete.el-dropdown-menu {
    background-color: #232323;
    border-radius: 1px;
    padding: 0px;
    border: 0px;
    width: 100px;
    margin-top: 1px;
  }

  .operationLog-dropdown-menue-delete .popper__arrow {
    display: none !important;
  }

  .dropdown-item-delete {
    font-size: 12px !important;
    text-align: center;
    line-height: 31px !important;
  }

  .dropdown-item-delete.el-dropdown-menu__item:not(.is-disabled):hover, .el-dropdown-menu__item:focus {
    background: #B94A48;
  }

  .operationLogButton .el-icon-refresh {
    margin-left: -3px;
  }

  #log-radio-group {
    margin-right: 48px;
    padding-bottom: 3px;
  }

  #log-radio-group .el-radio-button__inner {
    width: 48px;
    height: 24px;
    font-size: 12px;
    /*color: #FFFFFF;*/
    letter-spacing: 0;
    text-align: center;
    line-height: 24px;
    padding: 0;
    margin: 0;
  }

  .log-query-input {
    width: 288px;
    height: 28px;
    margin-right: 48px;
  }

  .log-query-input .el-input .el-input--small {
    width: 288px;
  }
  .log-query-input .el-input__inner {
    border-radius: 28px;
    border: 2px rgba(34, 34, 43, 0.4) solid;
  }

  .history {
    flex: 1;
    height: 100%;
    margin-left: 60px;
    background: #fff;
    position: relative;
    .title {
      height: 20px;
      line-height: 20px;
      text-align: left;
      font-size: 16px;
      color: #979797;
      position: absolute;
      top: 16px;;
      left: 16px;
    }
    .historyNews {
      width: 100%;
      /*height: 660px;*/
      /*position: absolute;*/
      left: 24px;
      top: 60px;
      border-left: 1px solid rgba(0, 39, 39, 0.46);
      .historyNew {
        display: flex;
        justify-content: flex-start;
        margin: 0 0 15px -8px;
        i {
          margin-top: 16px;
          color: #001616;
        }
        .news {
          margin-left: 22px;
          dt {
            text-align: left;
            margin-bottom: 4px;
            color: #868686;
            font-size: 12px;
            span {
              color: #2A6184;
              background: rgba(42, 97, 132, .2)
            }
          }
          .tit {
            color: #494949;
            font-size: 13px;
            font-weight: bold;
          }
          .time {
            font-size: 13px;
            font-style: italic;
            margin: 15px 0px 0px -90px;
          }
        }
      }
    }
  }

</style>

